<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >字典搜索</el-button
          >
          <el-button
            @click="isShow1 = !isShow1"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow1 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <div v-show="isShow1 == true">
          <tr>
            <td>字典名称：</td>
            <td>
              <el-input
                v-model="searchModel.searchItem.dictionary_name"
              ></el-input>
            </td>
            <td>字典类型：</td>
            <td>
              <el-select
                v-model="searchModel.searchItem.dictionary_type"
                @change="SearchPage"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.dictionary_type"
                  :label="item.dictionary_type"
                  :value="item.dictionary_type"
                >
                </el-option>
              </el-select>
            </td>
            <td>
              <el-button type="primary" @click="SearchPage">查询</el-button>
            </td>
            <td>
              <el-button type="primary" @click="OpenAdd">添加</el-button>
            </td>
            <td>
              <el-button type="primary" @click="DictionaryInstallDelete"
                >删除</el-button
              >
            </td>
          </tr>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >字典详情</el-button
          >
          <el-button
            @click="isShow2 = !isShow2"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow2 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <div v-show="isShow2 == true">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            ref="multipleTable"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="dictionary_code" label="编号" width="180">
            </el-table-column>
            <el-table-column
              prop="dictionary_name"
              label="字典名称"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="dictionary_type" label="字典类型">
            </el-table-column>
            <el-table-column prop="dictionary_describe" label="字典描述">
            </el-table-column>
            <el-table-column label="编辑">
              <template slot-scope="scope">
                <el-button
                  @click="DictionaryInstallEdit(scope.row.dictionary_code)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div>
            <tr>
              <td>
                <span
                  >共{{ searchModel.pageCount }}页，当前第{{
                    searchModel.pageIndex
                  }}页，每页{{ searchModel.pageSize }}条，共{{
                    searchModel.total
                  }}条</span
                >
              </td>
              <td>
                <el-pagination
                  @size-change="SearchPage"
                  @current-change="SearchPage"
                  :current-page.sync="searchModel.pageIndex"
                  :page-sizes="[5, 10, 20, 30]"
                  :page-size.sync="searchModel.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="searchModel.total"
                >
                </el-pagination>
              </td>
            </tr>
          </div>
        </div>
      </el-card>
    </div>

    <div v-show="isShowEdit == true">
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text">{{
            isAdd == true ? "字典添加" : "字典编辑"
          }}</el-button>
          <el-button
            @click="isShow3 = !isShow3"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow3 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <el-col :push="8">
          <div v-show="isShow3 == true">
            <el-form
              style="float: left"
              ref="form"
              :model="form"
              label-width="80px"
            >
              <el-form-item label="ID" v-show="isAdd == false">
                <el-input v-model="form.dictionary_code" disabled></el-input>
              </el-form-item>
              <el-form-item label="字典名称">
                <el-input v-model="form.dictionary_name"></el-input>
              </el-form-item>
              <el-form-item label="字典类型">
                <el-input v-model="form.dictionary_type"></el-input>
              </el-form-item>
              <el-form-item label="字典描述">
                <el-input v-model="form.dictionary_describe"></el-input>
              </el-form-item>
              <el-button
                type="success"
                @click="
                  isAdd == true
                    ? DictionaryInstallAdd()
                    : DictionaryInstallUpdate()
                "
                >保存</el-button
              >
              <el-button @click="isShowEdit = false">取消</el-button>
            </el-form>
          </div>
        </el-col>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  DictionaryInstallDelete,
  SearchPage,
  DictionaryInstallEdit,
  DictionaryInstallAdd,
  GetDropDown,
  DictionaryInstallUpdate,
} from "./dictionary_installApi";
export default {
  data() {
    return {
      tableData: [],
      options: [],
      isShow1: true, //字典搜索
      isShow2: true, //字典详情
      isShow3: true, //字典添加修改反填
      isAdd: true, //是否是添加
      isShowEdit: false, //显示添加卡片
      searchModel: {
        pageIndex: 1,
        pageSize: 10,
        pageCount: 0,
        total: 0,
        searchItem: {
          dictionary_name: null,
          dictionary_type: null,
        },
      },
      form: {
        dictionary_name: null,
        dictionary_type: null,
        dictionary_describe: null,
        dictionary_code: 0,
      },
    };
  },
  created() {
    this.SearchPage();
    this.GetDropDown();
  },
  methods: {
    SearchPage() {
      SearchPage(this.searchModel).then((res) => {
        this.tableData = res.data.data;
        this.searchModel.total = res.data.total;
        this.searchModel.pageCount = res.data.pageCount;
      });
    },
    GetDropDown() {
      GetDropDown().then((res) => {
        this.options = res.data;
      });
    },
    OpenAdd() {
      this.isShowEdit = true;
      this.isAdd = true;
      this.form.dictionary_code = 0;
      this.form.dictionary_describe = null;
      this.form.dictionary_name = null;
      this.form.dictionary_type = null;
    },
    DictionaryInstallAdd() {
      if (
        this.form.dictionary_name == null ||
        this.form.dictionary_name == ""
      ) {
        alert("字典名不能为空");
        return;
      }
      DictionaryInstallAdd(this.form).then((res) => {
        if (res.data > 0) {
          alert("添加成功");
          this.isShowEdit = false;
          this.SearchPage();
          this.GetDropDown();
        } else {
          alert("字典名不能为空");
        }
      });
    },
    DictionaryInstallDelete() {
      var arr = this.$refs.multipleTable.selection;
      if (arr.length == 0) {
        this.$message("至少选中一条数据");
        return;
      }
      var ids = new Array();
      arr.forEach((r) => {
        ids.push(r.dictionary_code);
      });
      DictionaryInstallDelete(ids).then((res) => {
        if (res.data > 0) {
          alert("删除成功");
          this.SearchPage();
        }
      });
    },
    DictionaryInstallEdit(id) {
      this.isShowEdit = true;
      this.isAdd = false;
      DictionaryInstallEdit(id).then((res) => {
        this.form = res.data;
      });
    },
    DictionaryInstallUpdate() {
      if (
        this.form.dictionary_name == null ||
        this.form.dictionary_name == ""
      ) {
        alert("字典名不能为空");
        return;
      }
      DictionaryInstallUpdate(this.form).then((res) => {
        if (res.data > 0) {
          alert("修改成功");
          this.isShowEdit = false;
          this.SearchPage();
          this.GetDropDown();
        } else {
          alert("字典名不能为空");
        }
      });
    },
  },
};
</script>